<%--
  Created by IntelliJ IDEA.
  User: 17420
  Date: 2021/7/28
  Time: 16:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="jquery.js"></script>
    <title>详情</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        h2,
        b {
            font-weight: normal;
        }

        a {
            text-decoration: none;
            color: #000;
        }

        .welcome{
            color:white;
            line-height: 40px;
            position: absolute;
            left: 1200px;
        }

        .grey {
            background: url(img/bg.png) repeat;
            height: 1500px;
        }

        .content {
            width: 800px;
            margin: 0 auto;
            padding: 50px 200px;
        }

        .content h2 {
            color: #494949;
        }

        .content .year {
            margin-left: 10px;
            color: #888;
        }

        .content .tit {
            margin: 10px 0;
        }

        .content .box {
            height: 500px;
            height: 220px;
        }

        .content .box .left {
            width: 600px;
        }

        .content .box .image {
            width: 135px;
            height: 200px;
            float: left;
        }

        .content .box .image img {
            width: 100%;
            height: 100%;
        }

        .content .box .info {
            width: 400px;
            float: left;
            margin-left: 10px;
        }

        .content .box .info span {
            display: block;
            color: #666;
            margin-bottom: 12px;
            font-size: 14px;
        }

        .content .box .info b {
            color: #111;
            font-size: 14px;
            font-weight: normal;
        }

        .content .box .right {
            width: 150px;
            float: left;
        }

        .content .box .right .logo {
            color: #666;
            font-size: 16px;
        }

        .content .box .right .grade {
            color: #494949;
            font-size: 24px;
            margin: 10px 0;
        }

        .content .box .right .number {
            color: #666;
            font-size: 14px;
        }

        .content .box .right .cleanfloat::after {
            display: block;
            clear: both;
            content: "";
            visibility: hidden;
            height: 0;
        }

        .content .box .right ul li {
            list-style: none;
            float: left;
            font-size: 20px;
            margin: 5px;
            color: #ccc;
            cursor: pointer;
        }

        .content .box .right .hs,
        .content .box .right .cs {
            color: rgb(245, 177, 51);
        }

        .content .box .right .rating h2 {
            font-size: 16px;
            margin-top: 10px;
            color: #666;
        }

        .content .box .right .collect a {
            margin: 0 auto;
        }

        .content .box .right .collect {
            margin-top: 10px;
            width: 100px;
            height: 50px;
            font-size: 17px;
            line-height: 50px;
            text-align: center;
            border-radius: 10px;
            background-color: #000;
            color:#F7EE58;
        }

        .content .box .right .collect :hover{
            color:white;
        }

        .content .intro {
            height: 150px;
        }

        .content .intro h2 {
            font-size: 16px;
            margin: 10px 0;
        }

        .content .intro .txt {
            height: 100px;
            text-indent: 2em;
            font-size: 14px;
            line-height: 25px;
            word-break: break-all;
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
        }

        .content .comment {}

        .content .comment h2 {
            font-size: 16px;
            margin: 10px 0;
        }

        .content .comment li {
            font-size: 13px;
            color: #666;
            height: 100px;
            margin-top: 10px;
            border-top: 1.5px solid #ccc;
            padding: 10px;
        }

        .content .comment li .id {
            color: #111;
            display: block;
            color: rgb(51, 168, 197);
        }

        .content .comment li .txt {
            word-break: break-all;
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
        }

        .content .comment .pages {
            height: 50px;
            margin-bottom: 20px;
        }

        .content .comment .pages b {
            height: 25px;
            width: 25px;
            display: block;
            float: left;
            border-radius: 15px;
            background-color: #fff;
            font-size: 12px;
            text-align: center;
            line-height: 25px;
            margin: 10px 5px;
            background-color: #ccc;
            cursor: pointer;
        }

        .content .comment textarea {
            padding: 10px;
        }



        /*页眉：*/
        .top{
            height:40px;
            background-color:#313438;
        }

        .log_regis{
            color:#BEBEBE;;
            position:absolute;
            line-height: 40px;
            left:1150px;
        }

        .log_regis img:hover{
            border-top:5px solid #313438;
        }


        .exit{
            color:#BEBEBE;
            position:absolute;
            line-height: 40px;
            right:40px;
        }

        .exit img:hover{
            border-top:5px solid #313438;
        }

        .header{
            height:120px;
            padding-left: 150px;
            background-color:white;
        }

        .header input{
            height:35px;
            width:300px;
            position:absolute;
            top:120px;
            left:700px;
            border:2px solid  #000000;
            border-top-left-radius: 30px;
            border-bottom-left-radius: 30px;
            outline:none;
            padding-left: 20px;
        }

        .header button{
            height:39px;
            width:100px;
            position:absolute;
            top:120px;
            left:1001px;
            border: 5px solid #000000;
            background-color:#000000;
            border-top-right-radius: 30px;
            border-bottom-right-radius: 30px;
            padding-top: 3px;
        }

        .header button:hover{
            cursor: pointer;
            background-color:#5f5f5f;
            border:#5f5f5f ;
        }

        .line1{
            height:130px;
            position:absolute;
            top:110px
        }



        /*页脚：*/
        .foot{
            height:320px;
            background-color:#313438;
            padding:80px;
            color:#fff;
            font-size:15px;
            box-sizing: border-box;
            text-align: center;
        }

        .foot ul li{
            width:auto;
            padding-right:15px;
            padding-left:15px;
            height:15px;
            line-height:15px;
            float:left;
            border-right: 1px solid #fff;
            text-align: center;
        }

        .foot ul li a:hover{
            text-decoration: underline;
        }

        .foot_content1{
            margin:0 auto;
            width:410px;
        }

        .foot_content2{
            margin:0 auto;
            width:200px;
        }

        a{
            text-decoration: none;
            color:inherit;
        }
        .mycom input{
            -webkit-appearance: none;
            border:none;background-color: #000;
            height:30px;
            width:70px;
            border-radius: 10px;
            color:white;
            cursor: pointer;
        }

        .mycom input:hover{
            background-color:#313438;
        }

        .home{
            color:white;
            line-height: 40px;
            position:absolute;
            left:40px;
            padding:5px;
        }



    </style>

</head>

<body>
<!--顶部横条-->
<div class="top">

    <div class="home">
        <a href="index.jsp"><img title="首页" src="img/小房子.png" height="30px;"></a>
    </div>

    <div class="log_regis">
        <a href="Info?method=userInfo&userId=${user.getId()}"><img title="个人中心" src="img/头像.jpeg" height="40px;"></a>
    </div>

    <div class="welcome">
        <p>${user.getUsername()}，欢迎你！</p>
    </div>

    <div class="exit">
        <a href="Logout"><img  title="退出登录" src="img/出口.jpg" height="40px;"></a>
    </div>

</div>

<!--页眉-->
<div class="header">
    <img src="img/logo4.png" height="120px" width="200px"/>
    <img src="img/场记板2.png" height="60px" width="100px" />
    <form action="Movie" method="post">
        <input type="text" name="name">
        <%--    <input type="button" src="img/放大镜.png" height="25px" value="搜索">--%>
        <button><img src="img/放大镜.png" height="25px"/></button>
    </form>
</div>

<!--主板-->
<br>
<img src="img/摄影机.png" class="line1"/>
<hr style="background-color:#000; height:5px;margin-left: 100px;"><br>


<div class="grey">
    <div class="content">
        <h2 class="tit">${movie.name}<b class="year">${movie.year}</b></h2>
        <div class="box">
            <div class="left">
                <div class="image"><img src="img/${movie.name}.webp" /></div>
                <div class="info">
                        <span class="direct">
                            导演：<b>${movie.direct}</b>
                        </span>
                    <span class="actor">
                            演员：<b>${movie.actor}</b>
                        </span>
                    <span class="lan">
                        语言: <b>${movie.language}</b>
                        </span>
                    <span class="area">
                            地区：<b>${movie.area}</b>
                        </span>
                    <span class="type">
                            类型：<b>${movie.type}</b>
                        </span>
                    <span class="length">
                            片长：<b>${movie.length}分钟</b>
                        </span>
                    <span class="id">
                            id：<b>${movie.id}</b>
                        </span>
                </div>
            </div>
            <div class="right">
                <div class="logo">电影评分</div>
                <%--                <div class="grade">${movie.grade / movie.number}</div>--%>

                <div class="grade"><fmt:formatNumber type="number" value="${(movie.grade / movie.number) * 2}" maxFractionDigits="1"/></div>
                <div class="number"><b>${movie.number}</b>人评分</div>
                <div class="rating">
                    <h2>我要打分：</h2>
                    <ul class="cleanfloat">
                        <li><a href="Rating?method=rating&rate=1&ID=${movie.id}&grade=${movie.grade}&number=${movie.number}&userId=${user.getId()}">&#9733;</a> </li>
                        <li><a href="Rating?method=rating&rate=2&ID=${movie.id}&grade=${movie.grade}&number=${movie.number}&userId=${user.getId()}">&#9733;</a> </li>
                        <li><a href="Rating?method=rating&rate=3&ID=${movie.id}&grade=${movie.grade}&number=${movie.number}&userId=${user.getId()}">&#9733;</a> </li>
                        <li><a href="Rating?method=rating&rate=4&ID=${movie.id}&grade=${movie.grade}&number=${movie.number}&userId=${user.getId()}">&#9733;</a> </li>
                        <li><a href="Rating?method=rating&rate=5&ID=${movie.id}&grade=${movie.grade}&number=${movie.number}&userId=${user.getId()}">&#9733;</a> </li>
                    </ul>
                </div>
                <div class="collect">
                    <a href="Rating?method=collect&userId=${user.getId()}&ID=${movie.id}">收藏此片</a>
                </div>

            </div>
        </div>
        <div class="intro">
            <h2>剧情简介...</h2>
            <div class="txt">
                ${movie.content}
            </div>
        </div>
        <div class="comment"><br><br>
            <h2>评论区</h2>
            <ul class="com">
                <c:forEach items="${comments}" var="comment" varStatus="status">
                <li>
                    <span class="id">用户${status.index+1}</span><br>
                    <span class="txt">${comment}</span>
                </li>
                </c:forEach>
            </ul>
            <div class="pages"></div>
            <div class="mycom">
                <h2>我要评论：</h2>
                <form action="Rating?movieId=${movie.id}" method="post">
                    <textarea name="viewpoint" rows="6" cols="80" placeholder="请输入评论..." style="border-radius: 20px; outline:none;"></textarea>
                    <input type="submit" value="提交评论" >
                </form>

            </div>
        </div>
    </div>
</div>

<script>
    $(function() {
        var cur = 1; //当前页
        var pagesize = 5; //设置每页尺寸

        var renpage = function() {
            //定义函数，处理分页
            var x = (cur - 1) * pagesize;
            var y = cur * pagesize;
            $('.com').find('li').hide().slice(x, y).show()
        }

        //以下代码添加分页
        var n = $('.com').find('li').length; //总记录条数
        var pages = Math.ceil(n / pagesize); //计算总页数

        for (let p = 0; p < pages; p++) {
            $("<b>" + (p + 1) + "</b>").appendTo($('.pages')).click(function() {
                cur = p + 1;
                console.log(cur);
                renpage();
            });
        }

        renpage(); //当页面加载时也要初始化分页

    })
    $(function() {
        $(".content .box .right ul li").hover(function() {
            $(this).addClass('hs');
            $(this).prevAll().addClass('hs');
        }, function() {
            $(this).removeClass('hs');
            $(this).prevAll().removeClass('hs');
        })

        $(".content .box .right ul li").click(function() {
            $(this).addClass('cs');
            $(this).prevAll().addClass('cs');
            $(this).nextAll().removeClass('cs');
        })
    })
    window.onload = function() {
        //翻页高亮：
        var ele = document.querySelectorAll('.pages b');
        ele[0].style.backgroundColor = "#999"
        for (var i = 0; i < ele.length; i++) {
            ele[i].onclick = function() {
                for (var i = 0; i < ele.length; i++) {
                    ele[i].style.backgroundColor = "";
                }
                this.style.backgroundColor = '#999';
            }
        }
    }
    //悬浮显示全文
    var o = document.querySelectorAll('.txt');
    for (v of o) {
        txt = v.innerHTML;
        v.setAttribute('title', txt)
    }
</script>

<!--页脚-->
<div class="foot">
    <p>友情链接</p><br>
    <div class="foot_content1">
        <ul>
            <li style="padding-left:0px;"><a target="_blank" href="https://movie.douban.com/">豆瓣电影</a></li>
            <li><a target="_blank" href="http://kan.sogou.com/">搜狗影视</a></li>
            <li><a target="_blank" href="https://www.51miz.com/">觅知网</a></li>
            <li><a target="_blank" href="https://www.iqiyi.com/">爱奇艺</a></li>
            <li><a target="_blank" href="https://v.qq.com/">腾讯视频</a></li>
        </ul>
    </div>
    <br><br><br>
    <p>制作团队</p><br>
    <div class="foot_content2">
        <ul>
            <li style="padding-left:0px;">刘俊仪</li>
            <li>练汪鑫</li>
            <li>刘源</li>
        </ul>
    </div>
</div>
</body>


</html>